<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>
</h:head>
<h:body>
	<p:layout fullPage="true">
		<p:layoutUnit position="north" size="115">
			<table border="0" width="100%">
				<tr>
					<td><h:form>
							<p:tabMenu activeIndex="0">
								<p:menuitem value="Map" url="/index.xhtml" icon="ui-icon-image" />
								<p:menuitem value="Statistics" url="/stat.xhtml"
									icon="ui-icon-signal" />
								<p:menuitem value="Top Videos" url="/top.xhtml"
									icon="ui-icon-video" />
								<p:menuitem value="All Posts/Videos" url="/list_all.xhtml"
									icon="ui-icon-star" />
								<p:menuitem value="Wiki"
									url="http://smm.informatik.haw-hamburg.de:11000/wiki/en/Main"
									icon="ui-icon-wrench" />
							</p:tabMenu>
						</h:form></td>
					<td width="10%"><h:outputLink
							value="http://www.gnu.org/licenses/lgpl" title="lgpl">
							<h:graphicImage
								value="http://www.gnu.org/graphics/lgplv3-147x51.png"
								height="50" style="border: 0px" />
						</h:outputLink></td>
				</tr>
				<tr>
					<td colspan="2"><center>
							<h:outputText id="Title"
								value="Open-Source Social Media Monitoring Toolbox" />
						</center></td>
				</tr>
			</table>
		</p:layoutUnit>

		<p:layoutUnit position="west" size="225" header="Streams"
			resizable="true" closable="true" collapsible="true">
			<h:form>
				<p:selectManyButton value="#{streamList.selectedOptions}">
					<f:selectItem itemLabel="Twitter"
						itemValue="#{streamList.getTwitter()}" />
					<f:selectItem itemLabel="YouTube"
						itemValue="#{streamList.getYoutube()}" />
					<p:ajax update=":lay" listener="#{streamList.updateList(ae)}"
						event="change" />
				</p:selectManyButton>

			</h:form>


			<h:form id="lay">
				<p:selectOneListbox id="basic" value="#{streamList.id}">
					<f:selectItems value="#{streamList.streams}" var="stream"
						itemLabel="#{stream.getStreamName()}"
						itemValue="#{stream.getStreamName()}" />
					<p:ajax update=":gmap"
						listener="#{mapBean.updateMap(ae, streamList.id)}" event="change" />
					<p:ajax update=":stackedgroup"
						listener="#{chartCategoryBean.updateChart(ae,streamList.id)}"
						event="change" />
					<p:ajax update=":out"
						listener="#{chartCategoryBean.updateCount(ae,streamList.id)}"
						event="change" />
				</p:selectOneListbox>

			</h:form>

		</p:layoutUnit>

		<p:layoutUnit position="east" size="200" header="Charts"
			resizable="true" closable="true" collapsible="true" effect="drop">

			<div align="center">
				<h:panelGroup id="stackedgroup">
					<p:barChart id="stacked" value="#{chartCategoryBean.categoryModel}"
						legendPosition="ne" style="height:300px" title="Sentiment-Chart"
						stacked="false" barMargin="50" min="0" max="100" animate="true" />
				</h:panelGroup>
				<h:outputLabel value="Total Posts: " />
				<h:outputText id="out" value="#{chartCategoryBean.count}" />
			</div>
			<div align="right">
				<h:outputLink value="http://www.alchemyapi.com"
					title="alchemyapi logo">
					<h:graphicImage
						value="http://www.alchemyapi.com/sites/default/files/alchemyAPI.png"
						width="100" />
				</h:outputLink>
			</div>
		</p:layoutUnit>

		<p:layoutUnit position="center">
			<center>
				<p:gmap id="gmap" center="0.0, 0.0" zoom="2" type="ROADMAP"
					model="#{mapBean.advancedModel}" style="width:900px;height:800px"
					widgetVar="map">
				</p:gmap>
			</center>
		</p:layoutUnit>
	</p:layout>
</h:body>
</html>